<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">

    .container .cart {
      width: 700px;
      margin: auto;
    }
    .container .title {
      background-color: #FFCE46;
      height: 40px;
      line-height: 40px;
      text-align: center;
      /*color: #fff;*/  
    }
    .container .list {
      background-color: #fff9ec;
      /*height: 40px;*/
      line-height: 40px;
      text-align: center;
      /*color: #fff;*/
    }

    .container .total {
      background-color: #FFCE46;
      height: 50px;
      line-height: 50px;
      text-align: right;
    }
    .container .total button {
      margin: 0 10px;
      background-color: #DC4C40;
      height: 35px;
      width: 80px;
      border: 0;
    }
    .container .total span {
      color: red;
      font-weight: bold;
    }
    .container .item {
      height: 55px;
      line-height: 55px;
      position: relative;
      border-top: 1px solid #ADD8E6;
    }
    .container .item img {
      width: 45px;
      height: 45px;
      margin: 5px;
    }
    .container .item .name {
      position: absolute;
      width: 90px;
      top: 0;left: 55px;
      font-size: 16px;
    }

    .container .item .change {
      width: 100px;
      position: absolute;
      top: 0;
      right: 50px;
    }
    .container .item .change a {
      font-size: 20px;
      width: 30px;
      text-decoration:none;
      background-color: lightgray;
      vertical-align: middle;
    }
    .container .item .change .num {
      width: 40px;
      height: 25px;
    }
    .container .item .del {
      position: absolute;
      top: 0;
      right: 0px;
      width: 40px;
      text-align: center;
      font-size: 40px;
      cursor: pointer;
      color: red;
    }
    .container .item .del:hover {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
      <div class="container">
        <my-cart></my-cart>
      </div>
  
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
  
      var CartTitle={
          props:['uname'],
        template: `
        <div class="title">{{uname}}的商品</div>
        `
      }
      
      var Cartlist={
          props:['books'],
          template: `
         <div id="appa" class="list">
             <div>
              <table >
              <thead>
              <tr>
                  <th>ID</th>
                  <th>书籍名称</th>
                  <th>出版日期</th>
                  <th>价格</th>
                  <th>购买数量</th>
                  <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in books" :key='item.id' >
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.data}}</td>
                  <td>{{item.pace}}</td>
                  <td>
                      <button type="button" @click.prevent="sub(item.id)">-</button>
                      <input type="text" class="sum" :value='item.sum' @blur='changesum(item.id,$event)'/>
                      <button @click.prevent="add(item.id)">+</button>
                  </td>
                  <div class="del"><td><button type="button"  @click='del(item.id)'>{{item.handle}}</button></td></div>

              </tr>
  
  
          </tbody>
          </table>
         </div>
         </div>
  
        `,
          methods: {
              changesum:function(id,even){
                  this.$emit('change-sum',{
                      id:id,
                      type:'change',
                      sum:even.target.value
                  });
              },
              sub:function(id){
                  this.$emit('change-sum',{
                      id:id,
                      type:'sub'
                  });
              },
              add:function(id){
                  this.$emit('change-sum',{
                      id:id,
                      type:'add'
                  });
              },
              del:function(id){
                  //把id传递给父组件
                  this.$emit('cart-del',id);
              }
          }
      }
  
  
      var Carttocal={
          props:['books'],
          template: `
              <div class="total">
                  <span>总价：{{total}}</span>
                  <button>结算</button>
              </div>
        `,
          computed:{
              total:function () {
                  var t=0;
                  this.books.forEach(item=>{
                      t+=item.pace*item.sum;
                  });
                  return t;
              }
          }
  
      }
      Vue.component('my-cart', {
          
          data:function(){
              return{
                  uname:'张三',
                  books: [
                      {
                          id:0,
                          data: '2010-10',
                          pace: 80.00,
                          sum:1,
                          handle:'删除',
                          name:'《Java从入门到放弃》',
  
                      },
                      {
                          id:1,
                          data: '2010-11',
                          pace: 80.00,
                          sum:1,
                          handle:'删除',
                          name:'《Vue从入门到放弃》',
  
                      },
                      {
                          id:2,
                          data: '2010-11',
                          pace: 80.00,
                          sum:4,
                          handle:'删除',
                          name:'《PHP从入门到放弃》',
  
                      },
                      {
                          id:3,
                          data: '2010-12',
                          pace: 100.01,
                          sum:2,
                          handle:'删除',
                          name:'《ABC从入门到放弃》',
  
                      },
  
                      {
                          id:4,
                          data: '2010-12',
                          pace: 100.13,
                          sum:2,
                          handle:'删除',
                          name:'《DFE从入门到放弃》',
  
                      },
                  ]
              }
          },
          template:`
           <div class="cart">
             <cart-title :uname="uname"></cart-title>
             <cart-list  :books="books" @change-sum='changegeSum($event)' @cart-del='delCart($event)'></cart-list>
             <cart-tocal :books="books"></cart-tocal>
           </div>
          `,
          components:{
              'cart-title':CartTitle,
              'cart-list':Cartlist,
              'cart-tocal':Carttocal
          },
          methods: {
              changegeSum:function(val){
                  //分为三中情况变更，输入、加、减
                  //根据子组件传递过来的数据，更新books中对应的值
                  if (val.type=='change'){
                      this.books.some(item=>{
                          if (item.id==val.id){
                              if (val.sum>=1)
                              {
                                  item.sum=val.sum;
                              }else {
                                  item.sum=1;
                              }
  
  
                              return true;
                          }
                      })

                  }else if (val.type=='sub'){
                      this.books.some(item=>{
                          if (item.id==val.id){
                              if (item.sum>1){
                                  item.sum-=1;
                              }else {
                                  item.sum=1;
                              }
  
                              return true;
                          }
                      })
                  }else if (val.type=='add'){
                      this.books.some(item=>{
                          if (item.id==val.id){
                              item.sum+=1;
                              return true;
                          }
                      })
                  }
  
              },
  
              delCart:function (id) {
                  //根据id删除list中对应的数据
                  //1、找到id所对应的索引
                  var index=this.books.findIndex(item=>{
                      return item.id == id;
                  });
                  //根据索引删除对应的数据
                  this.books.splice(index,1);
              }
          }
      });
      var vm=new Vue ({
          el:'#app',
          data:{
  
          }
      });
  </script>
  
  </body>
</html>